<template>
	<div id="app">
		<!-- <router-link to="/">Home</router-link> | -->
		<!-- <router-link to="/about">About</router-link> -->

		<el-container>

			<el-header class="header">
				<div class="content">
					<div class="logo">
						<img src="@/assets/tx-logo.png" alt="">
					</div>
					<nav>
						<!-- <router-link v-for="(item, idx) in navList" :key="idx" :to="item.href">{{item.title}}
						</router-link> -->
						<div class="el-icon-document  icon">分类</div>
						<ul>
							<li v-for="(item,idx) in navList" :key="idx" @click="tokind(idx)">{{item.title}}</li>
							<!-- <li>IT·互联网</li>
							<li>IT·互联网</li>
							<li>IT·互联网</li> -->
						</ul>
					</nav>
					<div class="search">
						<el-input placeholder="请输入内容" v-model="input" clearable>
						</el-input>
						<el-button type="primary">搜索</el-button>
					</div>
					<div class="userMsg">
						<div>
							<span>企业培训</span>
							<span>入驻/合作</span>
							<span>用客户端</span>
							<span>私信</span>
							<span>登录</span>
						</div>
					</div>
				</div>
			</el-header>


			<el-main class="main">
				<div class="content">
					Main
					<router-view name="main"></router-view>
				</div>
			</el-main>



			<el-footer>Footer</el-footer>
		</el-container>

		<router-view />
	</div>
</template>

<script>
	import {getNavData} from "@/api";
	export default {
		data() {
			return {
				input: '',
				navList:[]
			}
		},
		created (){
		  getNavData().then(res=>{
		    this.navList = res.data;
			// console.log(res.data)
		  })
		},
		methods:{
		  tokind(i){
		    this.$router.push({
				name:"kind",
				params:{
					id:this.navList[i].id
				}
			}).catch(err=>{});
		  }
		}

	}
</script>

<style lang="less">
	html,body,ul,li,p,h1,h2,h3,h4,h5,h6,ol {
		margin: 0;
		padding: 0;
		// background: black;
	}
	li {
		list-style: none;
	}
	em,i {
		font-style: normal;
	}

	b,strong {
		font-weight: normal;
	}
	img {
		display: block;
	}
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;

		.header {
			height: 80px !important;
			// background-color: skyblue;
			background-color: #fff;
			display: flex;
			border-bottom: solid 3px #eaeaea;
			.content {
				display: flex;
				width: 1400px;
				margin: 0 auto;
				align-items: center;
				// background-color: pink;
				background-color: #fff;
				.logo {
					margin-right: 20px;

					img {
				 	width: 200px;
					}
				}
				nav{
					margin-left: auto;
					width: 80px;
					height: 80px;
						&:hover ul{
							display: block;
						}
					div{
						line-height: 80px;
						font-size: 20px;
						font-weight: 400;
						// background-color: yellow;
						text-align: center;
						position: relative;
					}
					ul{
						display: none;
						// background-color: mediumpurple;
						background-color: #fff;
						width: 160px;
						line-height: 40px;
						position: absolute;
						top: 80px;
						transform: translateX(-50px);
						li{
							padding-left: 10px;
							height: 60px;
							font-size: 18px;
							font-weight: 600;
							border-bottom: 1px solid black;
							cursor: pointer;
							&:hover{
								// background-color: hotpink;
								background-color: rgb(225, 223, 223);
							}
						}
					}
				}
				.search {
					display: flex;
					margin: 0 auto;
				}
				.userMsg {
					margin-left: auto;
					div{
						span{
							margin-right: 30px;
							cursor: pointer;
						}
					}
				}
			}
		}
		.main{
			 .content{
				 width: 1400px;
				//  background: ;
			 }
		}
		.footer{
		  height:40px;
		  line-height:40px;
		  text-align:center;
		}
	}
</style>
